<template>
  <span>
    <IconExcel v-if="type === DocumentType.PPT" theme="two-tone" :size="16" :fill="['#ff795b' ,'#d04424']" :strokeWidth="3" style="height:16px; margin-right:4px"/>
    <IconExcel v-else-if="type === DocumentType.EXCEL" theme="two-tone" :size="16" :fill="['#82d3a7' ,'#6da686']" :strokeWidth="3" style="height:16px; margin-right:4px"/>
    <IconExcel v-else-if="type === DocumentType.SHEET" theme="two-tone" :size="16" :fill="['#499b6e' ,'#1f6e42']" :strokeWidth="3" style="height:16px; margin-right:4px"/>
    <IconTreeDiagram v-else-if="type === DocumentType.FLOW"  theme="outline" :size="16" fill="#f09729" :strokeWidth="3" style="height:16px; margin-right:4px"/>
    <IconMindmapMap v-else-if="type === DocumentType.SMIND" theme="outline" :size="16" fill="#a61b29" :strokeWidth="3" style="height:16px; margin-right:4px" />
    <IconSlide v-else-if="type === DocumentType.EXCALIDRAW" theme="two-tone" :size="16" :fill="['#6864da' ,'#FFF']" :strokeWidth="3" style="height:16px; margin-right:4px" />
    <IconExcel v-else theme="two-tone" :size="16" :fill="['#4f82ce' ,'#295495']" :strokeWidth="3" style="height:16px; margin-right:4px"/>
  </span>
</template>

<script lang="ts" setup>
import { DocumentType } from '@/types/iframeViewMode'
withDefaults(defineProps<{
  type: string
}>(), {
  type: DocumentType.DOC
})
</script>

<style lang="scss" scoped>
 ::v-deep(.i-icon) {
    padding:0!important;
  }
</style>